<!-- 更多销售弹出框 -->
<template>
  <div class="dy-panel" v-if="showSaleMoreLayer">
    <div class="dy-panel-main">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
      <div class="dy-panel-content">
        <div class="dy-panel-item" v-for="(item,index) in moreDataList" @click="clickMoreEvent(item)">
          <div class="t-l"></div>
          <div class="t-r"></div>
          <div class="b-l"></div>
          <div class="b-r"></div>
          <div class="dy-panel-icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
          <div class="dy-panel-text">{{item.title}}</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 服务区销售排行 -->
  <sale-fwqxsph-layer v-if="fwqxsphShowLayer" @closeChild="closeChild"></sale-fwqxsph-layer>
  <sale-fgsxsph-layer v-if="fgsxsphShowLayer" @closeChild="closeChild"></sale-fgsxsph-layer>
  <sale-spxhph-layer v-if="spxsphShowLayer" @closeChild="closeChild"></sale-spxhph-layer>
  <sale-csdpxsph-layer v-if="csdpxsphShowLayer" @closeChild="closeChild"></sale-csdpxsph-layer>
  <sale-ccsrzb-layer v-if="ccxszbShowLayer" @closeChild="closeChild"></sale-ccsrzb-layer>
  <saleyyfyxszb-layer v-if="yyfyxszbShowLayer" @closeChild="closeChild"></saleyyfyxszb-layer>
  <sale-jyzbydwcdb-layer v-if="jyzbydwcdbShowLayer" @closeChild="closeChild"></sale-jyzbydwcdb-layer>
  <sale-fwqmbwcph-layer v-if="fwqmbwcphShowLayer" @closeChild="closeChild"></sale-fwqmbwcph-layer>

  <!-- 业务板块目标完成 -->
  <sale-ywbkmbwc-layer v-if="ywbkmbwcShowLayer" @closeChild="closeChild"></sale-ywbkmbwc-layer>
  <!-- 分公司目标完成对比 -->
  <sale-fgsmbwcdb-layer v-if="fgsmbwcdbShowLayer" @closeChild="closeChild"></sale-fgsmbwcdb-layer>
  <!-- 业态完成与上年对比 -->
  <sale-ytwcysndb-layer v-if="ytwcysndbShowLayer" @closeChild="closeChild"></sale-ytwcysndb-layer>
  <!-- 七日销售趋势 -->
  <sale-qrxsqs-layer v-if="qrxsqsShowLayer" @closeChild="closeChild"></sale-qrxsqs-layer>
  <!-- 加油站月度销售趋势 -->
  <sale-jyzydxsqs-layer v-if="jyzydxsqsShowLayer" @closeChild="closeChild"></sale-jyzydxsqs-layer>
  <!-- 车客流与营收关系趋势 -->
  <sale-cklyysgxqs-layer v-if="cklyysxsqsShowLayer" @closeChild="closeChild"></sale-cklyysgxqs-layer>

</template>
<script setup>
  import {ref} from "vue";
  import fwqxsph from "../../../assets/img/sale_more/icon2-1.png";
  import fgsxsph from "../../../assets/img/sale_more/icon2-2.png";
  import spxsph from "../../../assets/img/sale_more/icon2-3.png";
  import ccxszb from "../../../assets/img/sale_more/icon2-4.png";
  import csdpxsph from "../../../assets/img/sale_more/icon2-5.png";
  import yyfyxszb from "../../../assets/img/sale_more/icon2-6.png";
  import ywbkmbwc from "../../../assets/img/sale_more/icon2-7.png";
  import fgsmbwcdb from "../../../assets/img/sale_more/icon2-8.png";
  import yyzbydwcdb from "../../../assets/img/sale_more/icon2-9.png";
  import fwqmbwcph from "../../../assets/img/sale_more/icon2-10.png";
  import ytwcysndb from "../../../assets/img/sale_more/icon2-11.png";
  import SaleFwqxsphLayer from "./saleFwqxsphLayer.vue";
  import SaleFgsxsphLayer from "./saleFgsxsphLayer.vue";
  import SaleSpxhphLayer from "./saleSpxhphLayer.vue";
  import SaleCsdpxsphLayer from "./saleCsdpxsphLayer.vue";
  import SaleCcsrzbLayer from "./saleCcsrzbLayer.vue";
  import SaleyyfyxszbLayer from "./saleyyfyxszbLayer.vue";
  import SaleJyzbydwcdbLayer from "./saleJyzbydwcdbLayer.vue";

  import SaleFwqmbwcphLayer from "./saleFwqmbwcphLayer.vue";
  import SaleYwbkmbwcLayer from "./saleYwbkmbwcLayer.vue";
  import SaleFgsmbwcdbLayer from "./saleFgsmbwcdbLayer.vue";
  import SaleYtwcysndbLayer from "./saleYtwcysndbLayer.vue";
  import SaleQrxsqsLayer from "./saleQrxsqsLayer.vue";
  import SaleJyzydxsqsLayer from "./saleJyzydxsqsLayer.vue";
  import SaleCklyysgxqsLayer from "./saleCklyysgxqsLayer.vue";

  const props = defineProps({
    showSaleMoreLayer: Boolean
  })
  const emit = defineEmits(['closeMoreLayers','showMoreLayers']);

  const moreDataList = ref([
    {
      title:'服务区销售对比',
      name:'fwqxsph',
      icon: fwqxsph
    },
    {
      title:'分公司销售排行',
      name:'fgsxsph',
      icon: fgsxsph
    },
    {
      title:'商铺销售排行',
      name:'spxsph',
      icon: spxsph
    },
    {
      title:'餐超销售占比',
      name:'ccxszb',
      icon: ccxszb
    },
    {
      title:'超市单品销售排行',
      name:'csdpxsph',
      icon: csdpxsph
    },
    {
      title:'油与非油销售占比',
      name:'yyfyxszb',
      icon: yyfyxszb
    },
    {
      title:'业务板块目标完成',
      name:'ywbkmbwc',
      icon: ywbkmbwc
    },
    {
      title:'分公司目标完成对比',
      name:'fgsmbwcdb',
      icon: fgsmbwcdb
    },
    {
      title:'经营指标月度完成对比',
      name:'yyzbydwcdb',
      icon: yyzbydwcdb
    },
    {
      title:'服务区目标完成排行',
      name:'fwqmbwcph',
      icon: fwqmbwcph
    },
    {
      title:'业态完成与上年对比',
      name:'ytwcysndb',
      icon: ytwcysndb
    },
    {
      title:'七日销售趋势',
      name:'qrxsqs',
      icon: ytwcysndb
    },
    {
      title:'加油站月度销售趋势',
      name:'jyzydxsqs',
      icon: ytwcysndb
    },
    {
      title:'车客流与营收关系趋势',
      name:'cklyysxsqs',
      icon: ytwcysndb
    }
  ])

  const fwqxsphShowLayer = ref(false);//显示 服务区销售排行
  const fgsxsphShowLayer = ref(false);//显示 分公司销售排行
  const spxsphShowLayer = ref(false);// 显示 商铺销售排行
  const ccxszbShowLayer = ref(false);// 显示 餐超销售占比
  const csdpxsphShowLayer = ref(false);//显示 超市单品销售排行
  const yyfyxszbShowLayer = ref(false);//显示 油与非油销售占比
  const jyzbydwcdbShowLayer = ref(false);//显示 经营指标月度完成对比
  const fwqmbwcphShowLayer = ref(false);//显示 服务区目标完成排行

  const ywbkmbwcShowLayer = ref(false);//显示 业务板块目标完成
  const fgsmbwcdbShowLayer = ref(false);//显示 分公司目标完成对比
  const ytwcysndbShowLayer = ref(false);//显示 业态完成与上年对比
  const qrxsqsShowLayer = ref(false); //显示 七日销售趋势
  const jyzydxsqsShowLayer = ref(false); //显示 加油站月度销售趋势
  const cklyysxsqsShowLayer = ref(false); //显示 车客流与营收关系趋势

  const closeCurrent = function (){
    emit("closeMoreLayers",'sale');
  }
  const showCurrent = function (){
    emit("showMoreLayers",'sale');
  }
  const clickMoreEvent = function (item){
    closeCurrent();
    if (item.name === 'fwqxsph'){
      fwqxsphShowLayer.value = true;
    }else if (item.name === 'fgsxsph'){
      fgsxsphShowLayer.value = true;
    }else if (item.name === 'spxsph'){
      spxsphShowLayer.value = true;
    }else if (item.name === 'ccxszb'){
      ccxszbShowLayer.value = true;
    }else if (item.name === 'csdpxsph'){
      csdpxsphShowLayer.value = true;
    }else if (item.name === 'yyfyxszb'){
      yyfyxszbShowLayer.value = true;
    }else if (item.name === 'ywbkmbwc'){
      ywbkmbwcShowLayer.value = true;
    }else if (item.name === 'fgsmbwcdb'){
      fgsmbwcdbShowLayer.value = true;
    }else if (item.name === 'yyzbydwcdb'){
      jyzbydwcdbShowLayer.value = true;
    }else if (item.name === 'fwqmbwcph'){
      fwqmbwcphShowLayer.value = true;
    }else if (item.name === 'ytwcysndb'){
      ytwcysndbShowLayer.value = true;
    }else if(item.name ==="qrxsqs"){
      qrxsqsShowLayer.value = true;
    }else if(item.name ==="jyzydxsqs"){
      jyzydxsqsShowLayer.value = true;
    }else if(item.name ==="cklyysxsqs"){
      cklyysxsqsShowLayer.value = true;
    }

  }

  const closeChild = function (){
    fwqxsphShowLayer.value = false;
    fgsxsphShowLayer.value = false;
    spxsphShowLayer.value = false;
    ccxszbShowLayer.value = false;
    csdpxsphShowLayer.value = false;
    yyfyxszbShowLayer.value = false;
    ywbkmbwcShowLayer.value = false;
    fgsmbwcdbShowLayer.value = false;
    jyzbydwcdbShowLayer.value = false;
    fwqmbwcphShowLayer.value = false;
    ytwcysndbShowLayer.value = false;
    qrxsqsShowLayer.value = false;
    jyzydxsqsShowLayer.value = false;
    cklyysxsqsShowLayer.value = false;

    showCurrent();
  }
</script>
<style scoped>
.dy-panel{
    position: fixed;
    top: 22.6vh !important;
    width: 100%;
    z-index: 1002;
    .dy-panel-main{
        background: rgba(5, 36, 44, 0.9);
        width: 40% !important;
        min-height: 40vh;
        margin: 0 auto;
        padding-right: 2.5vh;
        padding-bottom: 2.0vh;
        position: relative;
        .dy-panel-header{
            height: 3vh;
            .dy-panel-close{
                position: absolute;
                height: 2.6vh;
                width: 2.6vh;
                background-image: url("../../../assets/img/public/关闭.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                right: 1vh;
                top: 2vh;
                cursor: pointer;
            }
        }
        .dy-panel-content{
            display: flex;
            padding: 1vh;
            flex-wrap: wrap;
            .dy-panel-item{
                position: relative;
                width: 30%;
                border: 1px solid #407f86;
                margin-left: 2.2vh;
                margin-top: 2.0vh;
                padding: 2vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                cursor: pointer;
                .t-l{
                    position: absolute;
                    border-top: 2px solid #00EAFF;
                    border-left: 2px solid #00EAFF;
                    width: 2vh;
                    height: 2vh;
                    left: 0;
                    top: 0;
                }
                .t-r{
                    position: absolute;
                    border-top: 2px solid #00EAFF;
                    border-right: 2px solid #00EAFF;
                    width: 2vh;
                    height: 2vh;
                    right: 0;
                    top: 0;
                }
                .b-r{
                    position: absolute;
                    border-bottom: 2px solid #00EAFF;
                    border-right: 2px solid #00EAFF;
                    width: 2vh;
                    height: 2vh;
                    right: 0;
                    bottom: 0;
                }
                .b-l{
                    position: absolute;
                    border-bottom: 2px solid #00EAFF;
                    border-left: 2px solid #00EAFF;
                    width: 2vh;
                    height: 2vh;
                    left: 0;
                    bottom: 0;
                }
                .dy-panel-icon{
                    width: 2.8vh;
                    height: 2.0vh;
                    background-size: 100% 100%;
                    margin: 2vh 0;
                }
                .dy-panel-text{
                    color: #FFFFFF;
                    font-family: "PingFang SC",serif;
                    font-weight: bolder;
                    font-size: 1.6vh;
                }
            }
        }
    }
}
</style>
